<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 密码框必须的css，记得css中需要的小图标也需要复制过来 -->
<link rel="stylesheet" href="css/psdbox.css" />

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<title>密码框</title>
</head>
<body>
<input type="text" id="money" placeholder="请输入金额">
<input type="button" id="submit" value="密码框" onclick="submit($('#money').val())">

<!--密码框标签开始-->
<div class="ftc_wzsf">
    <div class="srzfmm_box">
        <div class="qsrzfmm_bt clear_wl">
            <img src="image/psdbox/xx_03.jpg" class="tx close fr">
            <span class="fl">请输入支付密码</span></div>
        <div class="zfmmxx_shop">
            <span class="zhifu_price"></span></div>
        <ul class="mm_box">
            <li></li><li></li><li></li><li></li><li></li><li></li>
        </ul>
    </div>
    <div class="numb_box">
        <div class="xiaq_tb">
            <img src="image/psdbox/jftc_14.jpg" height="10"></div>
        <ul class="nub_ggg">
            <li><a href="javascript:void(0);" class="zf_num">1</a></li>
            <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
            <li><a href="javascript:void(0);" class="zf_num">3</a></li>
            <li><a href="javascript:void(0);" class="zf_num">4</a></li>
            <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
            <li><a href="javascript:void(0);" class="zf_num">6</a></li>
            <li><a href="javascript:void(0);" class="zf_num">7</a></li>
            <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
            <li><a href="javascript:void(0);" class="zf_num">9</a></li>
            <li><a href="javascript:void(0);" class="zf_empty">清空</a></li>
            <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
            <li><a href="javascript:void(0);" class="zf_del">删除</a></li>
        </ul>
    </div>
    <div class="hbbj"></div>
</div>
<!--密码框标签结束-->
</body>

<script type="text/javascript">

//提交的方法
function submit(money) {
	//设置密码框中的提示金额
	$('.zhifu_price').text("￥" + money)
	//出现密码框
	$(".ftc_wzsf").show();
	//关闭浮动
	$(".close").click(function(){
		$('body').removeClass('cover');
		$(".ftc_wzsf").hide();
		$(".mm_box li").removeClass("mmdd");
		$(".mm_box li").attr("data","");
		i = 0;
	});
		//数字显示隐藏
	$(".xiaq_tb").click(function(){
		$(".numb_box").slideUp(500);
	});
	$(".mm_box").click(function(){
		$(".numb_box").slideDown(500);
	});
	
	$(".nub_ggg li .zf_del").click(function(){
		if(i>0){
			i--
			$(".mm_box li").eq(i).removeClass("mmdd");
			$(".mm_box li").eq(i).attr("data","");
		}
	});

	$(".nub_ggg li .zf_empty").click(function(){
		$(".mm_box li").removeClass("mmdd");
		$(".mm_box li").attr("data","");
		i = 0;
	});
	var i = 0;
	$(".nub_ggg li .zf_num").unbind('click').click(function(){
			
		if(i<6){
			$(".mm_box li").eq(i).addClass("mmdd");
			$(".mm_box li").eq(i).attr("data",$(this).text());
			i++
			if (i==6) {
				var data = "";
				$(".mm_box li").each(function(){
					data += $(this).attr("data");
				});
				//可以在这写ajax将密码与需要的参数传到后台
				alert("密码：" + data);
				$(".mm_box li").removeClass("mmdd");
				$(".mm_box li").attr("data","");
				i = 0;
				$(".ftc_wzsf").hide();//隐藏密码框
			}
		} 
	});
	
}
</script>
</html>